<template>
  <div class="wrapper">
    <drill-map ref="drillMap" width="100%" height="100%" />
  </div>
</template>

<script>
import DrillMap from '@/components/chart/DrillMap'
import geojsonProvince from '@/assets/json/430000.json'
import geojsonPCity from '@/assets/json/430100.json'
export default {
  components: { DrillMap },
  props: {},
  data() {
    return {
      geojson: {},  // 地理数据
      options: {},  // 地图数据
      regionInfo: [] // 城市数据
    }
  },
  created() { },
  mounted() {
    this.init()
  },
  activated() { },
  updated() { },
  methods: {
    // 初始化方法
    init() {
      // 1.先获取地理数据
      // 静态
      if (this.regionIdArr.length === 1) {
        this.geojson = geojsonProvince
      } else {
        this.geojson = geojsonPCity
      }
     // 动态
      // this.$refs.drillMap.showLoading()
      //   const res = await getGeoJsonData({
      //     regionId: this.regionIds
      //   })

      //   this.geojson = res.data
      //   const res1 = await getRegionInfo({
      //     regionId: this.regionIds
      //   })
      //   this.regionInfo = res1.data


      // 4.判断是否有地理数
      if (!this.isEmptyObject(this.geojson)) {
        // 2.处理数据

        // 3. 处理配置
        this.option = {
          title: {
            text: '地图',
            subtext: '',
            x: 'center'
          },
          geo: {
            map: 'geoMap',
            show: true,
            zoom: 1.2, // 地图初始大小
            roam: false, // 允许缩放
            // 正常情况下的文字
            label: {
              show: false,
              align: 'left',
              textStyle: {
                color: '#FFF8E7',
                fontSize: 36,
                fontweight: 'bold'
              }
            },
            // 正常区域样式
            itemStyle: {
              // 地图区域的多边形 图形样式
              normal: {
                // 是图形在默认状态下的样式
                color: '#03224F',
                borderWidth: 3,
              }
            },
            // 高亮样式
            emphasis: {
              itemStyle: {
                borderColor: '#7ED0FF',
                color: '#082C64',
                shadowColor: '#66B4E4',
                shadowOffsetY: 1,
                shadowOffsetX: 1,
                shadowBlur: 42
              },
              label: {
                textStyle: {
                  color: '#FFF8E7'
                }
              }
            },
            silent: true
          },
          series: [
            // geo里面没有提示，系列为map可以设置提示框；但是系列为Map，没有geo，叠加散点没有coordinateSystem
            // 所以如果既要地图提示，又要叠加散点，那么geo和系列都要设置为map
            {
              type: 'map',
              mapType: 'geoMap',
              roam: false,
              zoom: 1.2,
              // 正常情况下的文字
              label: {
                show: true,
                textStyle: {
                  color: '#FFF8E7',
                  fontSize: 36,
                  fontweight: 'bold'
                }
              },
              // 正常区域样式
              itemStyle: {
                normal: {
                  // 是图形在默认状态下的样式
                  areaColor: '#03224F',
                  borderWidth: 3,
                  borderColor: 'red'
                }
              },
              // 高亮样式
              emphasis: {
                itemStyle: {
                  areaColor: '#082C64',
                  borderColor: '#7ED0FF',
                  borderWidth: 5,
                  shadowColor: '#66B4E4',
                  shadowOffsetY: 1,
                  shadowOffsetX: 1,
                  shadowBlur: 42
                },
                label: {
                  show: false,
                  textStyle: {
                    color: '#FFF8E7'
                  }
                }
              },
            }
          ]
        }
        this.$refs.drillMap.initMap(this.geojson, this.option, this.regionInfo)
      } else {
        this.$message.error('暂无地理数据,地图无法展示')
      }
    },
    // 是否空对象
    isEmptyObject(obj) {
      return Object.keys(obj).length === 0
    },
  },
  computed: {
    regionId() {
      return this.$store.state.common.regionId
    },
    regionName() {
      return this.$store.state.common.regionName
    },
    regionIdArr() {
      return this.$store.state.common.regionIdArr
    }
  },
  watch: {
    // 点击时，改变了regionId，改变后需要重新加载地图
    regionId(val) {
      this.init()
    }
  },
}
</script>
<style scoped lang='scss'>
.wrapper {
  width: 1200px;
  height: 800px;
  border: 1px solid red;
}
</style>